<template>

  <div class="app-container">

    <el-tabs v-model="activeName" type="border-card" @tab-click="tabClick">
      <el-tab-pane label="基本信息" name="a">

        <el-form ref="postForm" :model="postForm" label-position="left" :rules="rules" label-width="120px" class="app-container">

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="客户名称" prop="name">
                <el-input v-model="postForm.name" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="邮箱地址" prop="email">
                <el-input v-model="postForm.email" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="联系电话">
                <el-input v-model="postForm.mobile" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="客户类型">
                <dic-list-select v-model="postForm.cusType" dic-code="cus_type" style="width: 100%" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="客户来源">
                <dic-list-select v-model="postForm.source" dic-code="source" style="width: 100%" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="客户级别">
                <dic-list-select v-model="postForm.level" dic-code="level" style="width: 100%" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="客户行业">
                <dic-list-select v-model="postForm.industry" dic-code="industry" style="width: 100%" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="主营产品">
                <el-input v-model="postForm.product" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="备注信息">
                <el-input v-model="postForm.remark" type="textarea" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="公司地址">
                <el-input v-model="postForm.address" />
              </el-form-item>
            </el-col>

          </el-row>

          <div style="margin-top: 20px">
            <el-form-item label="">
              <el-button type="primary" @click="handleSave">保存</el-button>
              <el-button @click="navBack">返回</el-button>
            </el-form-item>
          </div>

        </el-form>

      </el-tab-pane>
      <el-tab-pane label="联系人" name="b">

        <linkman :customer-id="postForm.id" />

      </el-tab-pane>
      <el-tab-pane label="联系记录" name="c">
        <customer-contact :customer-id="postForm.id" />
      </el-tab-pane>
      <el-tab-pane label="历史跟进" name="d">
        <customer-track :customer-id="postForm.id" />
      </el-tab-pane>

      <!--      <el-tab-pane label="变更记录" name="e">历史跟进</el-tab-pane>-->
    </el-tabs>

  </div>

</template>

<script>
import permission from '@/directive/permission'
import DicListSelect from '@/components/DicListSelect'
import { apiSaveCustomer, apiCustomerDetail } from '@/api/customer/customer'
import Linkman from '@/views/admin/customer/components/linkman'
import CustomerContact from '@/views/admin/customer/components/contact'
import CustomerTrack from '@/views/admin/customer/components/track'

export default {
  directives: { permission },
  components: { CustomerTrack, CustomerContact, Linkman, DicListSelect },
  props: {

  },
  data() {
    return {
      flag: '',
      cacheKey: 'customer-detail-active',
      activeName: 'a',
      rules: {
        name: [
          { required: true, message: '客户名称不能为空！' }
        ],
        concat: [
          { required: true, message: '联系人姓名不能为空！' }
        ]
      },

      postForm: {
        id: ''
      }
    }
  },

  created() {
    this.postForm.id = this.$route.params.id
    this.flag = this.$route.params.flag

    // 获取详情
    apiCustomerDetail(this.postForm.id).then(res => {
      this.postForm = res.data
    })

    // 每条数据单独存储
    this.cacheKey = this.cacheKey + '-' + this.postForm.id

    // 选定记忆的标签
    const active = localStorage.getItem(this.cacheKey)
    if (active != null && active != '') {
      this.activeName = active
    }
  },

  methods: {

    // 返回
    navBack() {
      if (this.flag == 'keep') {
        this.$router.push('/admin/customer/keep')
      } else {
        this.$router.push('/admin/customer/sea')
      }
    },

    // 保存在缓存中
    tabClick(v) {
      localStorage.setItem(this.cacheKey, v.name)
    },

    handleSave() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }
        apiSaveCustomer(this.postForm).then(() => {
          this.$message({
            type: 'success',
            message: '客户保存成功!'
          })
        })
      })
    }
  }
}
</script>
